import React, {useEffect, useState} from 'react';
import useTable from "@/cms/use/useTable";
import {Button, message, Modal, Select, Space, Switch,Form, Tag} from "antd";
import useAddEdit from "./useAddEdit";
import useBindDevice from "@/pages/teaRoom/useBindDevice";
import {roomStatusList} from "@/pages/constant";

function TeaRoom(props) {
    const [open,setStatusOpen] = useState(false),
        [loading,setLoading] = useState(false),
        [form] = Form.useForm();
    const {queryList,tableDOM} = useTable({
        columns:[
            {
                title:"名称",
                dataIndex:"name",
            },{
                title:"适合人数",
                dataIndex:"nums"
            },
            // {
            //     title:"销量",
            //     dataIndex:"sales"
            // },
            {
                title:"标签",
                dataIndex:"tags",
                render(text){
                    return text.map(item=><Tag key={item}>{item}</Tag>)
                }
            },{
                title:"状态",
                dataIndex:"status",
                render(text){
                    return roomStatusList.find(item=>item.value === text)?.label;
                }
            },{
                title:"是否营业",
                dataIndex:"status",
                render(text,record){
                    return <Switch checked={text!==3} onChange={()=>changeStatus(text!==3,record)}/>
                }
            },
            {
                title:"操作",
                render(_,record){
                    return <Space>
                        <a onClick={()=>setOpen?setOpen(record):""}>编辑</a>
                        <a onClick={()=>setStatusOpen(record)}>状态设置</a>
                        <a onClick={()=>setDeviceOpen?setDeviceOpen(record):""}>设备管理</a>
                        <a style={{color:"red"}} onClick={()=>remove(record)}>删除</a>
                    </Space>
                }
            }
        ],
        xhr:{
            query:"/api/roomList",
        },
        extraParams:{
            company_id:window.company_id
        }
    })

    function onCancel(){
        setStatusOpen(false)
    }
    async function onOk(){
        const values = await form.validateFields();
        setLoading(true)
        try {
            const result = await ax.post("/api/modifyRoom",{
                id:open.ID,
                status:values.status
            })
            onCancel();
            queryList();
            return result;
        }finally {
            setLoading(false);
        }
    }
    useEffect(()=>{
        if(open){
            form.setFieldsValue(open)
        }
    },[open])

    const {ModalDOM,setOpen} = useAddEdit({
        queryList
    })
    const {DeviceModal,setDeviceOpen} = useBindDevice({
        queryList
    })
    function changeStatus(checked,record){
        if (record.fjm === 0 || record.dy === 0 || record.lb ===0){
            message.info("请完善设备信息！")
            return;
        }
        let status = 0;
        if (checked){
            status=3
        }else{
            status=1
        }
        ax.post("/api/modifyRoom",{
            id:record.ID,
            status
        }).then(res=>{
            if (res.msg === "success"){
                queryList()
            }
        })
    }
    function remove(record){
        Modal.confirm({
            title:"确认要删除吗？",
            onOk(){
                return new Promise((resolve, reject) => {
                    ax.post("/api/deleteRoom",{
                        id:record.ID
                    }).then(res=>{
                        message.success(res.msg);
                        queryList({
                            current:1
                        });
                        resolve()
                    }).catch(err=>{
                        reject(err)
                    })
                })
            }
        })

    }
    return (
        <div>
            {ModalDOM} {DeviceModal}
            <Button type={"primary"} onClick={()=>setOpen(true)}>添加</Button>
            {tableDOM}
            <Modal
                open={open}
                onCancel={onCancel}
                confirmLoading={loading}
                onOk={onOk}
                title={"状态设置"}
            >
                <Form
                    form={form}
                >
                    <Form.Item
                        label={"修改状态"}
                        name={"status"}
                    >
                        <Select options={roomStatusList.slice(1)} placeholder={"请选择"} allowClear />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}

export default TeaRoom;